
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">

    <style type="text/css">

        @font-face {font-family: "iconfont";
          src: url('iconfont.eot'); /* IE9*/
          src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('iconfont.woff') format('woff'), /* chrome, firefox */
          url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
          url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }

        .iconfont {
          font-family:"iconfont" !important;
          font-size:16px;
          font-style:normal;
          -webkit-font-smoothing: antialiased;
          -webkit-text-stroke-width: 0.2px;
          -moz-osx-font-smoothing: grayscale;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont">&#xee2f;</i>
                    <div class="name">列表</div>
                    <div class="code">&amp;#xee2f;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee39;</i>
                    <div class="name">发送</div>
                    <div class="code">&amp;#xee39;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee3c;</i>
                    <div class="name">充值</div>
                    <div class="code">&amp;#xee3c;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee3d;</i>
                    <div class="name">付款方式</div>
                    <div class="code">&amp;#xee3d;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee52;</i>
                    <div class="name">电子书</div>
                    <div class="code">&amp;#xee52;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee3b;</i>
                    <div class="name">扬声器</div>
                    <div class="code">&amp;#xee3b;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee44;</i>
                    <div class="name">标签</div>
                    <div class="code">&amp;#xee44;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee42;</i>
                    <div class="name">钱袋</div>
                    <div class="code">&amp;#xee42;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee25;</i>
                    <div class="name">照相机</div>
                    <div class="code">&amp;#xee25;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee57;</i>
                    <div class="name">正确</div>
                    <div class="code">&amp;#xee57;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee58;</i>
                    <div class="name">错误</div>
                    <div class="code">&amp;#xee58;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee5b;</i>
                    <div class="name">禁止</div>
                    <div class="code">&amp;#xee5b;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee5c;</i>
                    <div class="name">提示</div>
                    <div class="code">&amp;#xee5c;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee47;</i>
                    <div class="name">创意</div>
                    <div class="code">&amp;#xee47;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee24;</i>
                    <div class="name">账户</div>
                    <div class="code">&amp;#xee24;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee4b;</i>
                    <div class="name">文件</div>
                    <div class="code">&amp;#xee4b;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee4c;</i>
                    <div class="name">编辑文件</div>
                    <div class="code">&amp;#xee4c;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee4d;</i>
                    <div class="name">复制文件</div>
                    <div class="code">&amp;#xee4d;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee43;</i>
                    <div class="name">资料库</div>
                    <div class="code">&amp;#xee43;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee35;</i>
                    <div class="name">竖状图</div>
                    <div class="code">&amp;#xee35;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee51;</i>
                    <div class="name">计划</div>
                    <div class="code">&amp;#xee51;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee49;</i>
                    <div class="name">用研</div>
                    <div class="code">&amp;#xee49;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee29;</i>
                    <div class="name">密匙</div>
                    <div class="code">&amp;#xee29;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee4e;</i>
                    <div class="name">管理</div>
                    <div class="code">&amp;#xee4e;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee27;</i>
                    <div class="name">首页</div>
                    <div class="code">&amp;#xee27;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee28;</i>
                    <div class="name">搜索</div>
                    <div class="code">&amp;#xee28;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee21;</i>
                    <div class="name">用户</div>
                    <div class="code">&amp;#xee21;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee3a;</i>
                    <div class="name">对话</div>
                    <div class="code">&amp;#xee3a;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee36;</i>
                    <div class="name">邮件</div>
                    <div class="code">&amp;#xee36;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee5d;</i>
                    <div class="name">赞扬</div>
                    <div class="code">&amp;#xee5d;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee5e;</i>
                    <div class="name">批评</div>
                    <div class="code">&amp;#xee5e;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee26;</i>
                    <div class="name">设置</div>
                    <div class="code">&amp;#xee26;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee4f;</i>
                    <div class="name">删除</div>
                    <div class="code">&amp;#xee4f;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee59;</i>
                    <div class="name">信息</div>
                    <div class="code">&amp;#xee59;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee5a;</i>
                    <div class="name">帮助</div>
                    <div class="code">&amp;#xee5a;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee53;</i>
                    <div class="name">收藏</div>
                    <div class="code">&amp;#xee53;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee54;</i>
                    <div class="name">喜爱</div>
                    <div class="code">&amp;#xee54;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee23;</i>
                    <div class="name">好友</div>
                    <div class="code">&amp;#xee23;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee4a;</i>
                    <div class="name">编辑</div>
                    <div class="code">&amp;#xee4a;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee2c;</i>
                    <div class="name">附件</div>
                    <div class="code">&amp;#xee2c;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee31;</i>
                    <div class="name">大列表</div>
                    <div class="code">&amp;#xee31;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee33;</i>
                    <div class="name">大缩略图列表</div>
                    <div class="code">&amp;#xee33;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee34;</i>
                    <div class="name">瀑布流</div>
                    <div class="code">&amp;#xee34;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee32;</i>
                    <div class="name">列表</div>
                    <div class="code">&amp;#xee32;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee2d;</i>
                    <div class="name">下载</div>
                    <div class="code">&amp;#xee2d;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee38;</i>
                    <div class="name">发送邮件</div>
                    <div class="code">&amp;#xee38;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee55;</i>
                    <div class="name">加</div>
                    <div class="code">&amp;#xee55;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee56;</i>
                    <div class="name">减</div>
                    <div class="code">&amp;#xee56;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee2a;</i>
                    <div class="name">退出</div>
                    <div class="code">&amp;#xee2a;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee37;</i>
                    <div class="name">打开信息</div>
                    <div class="code">&amp;#xee37;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee2e;</i>
                    <div class="name">应用中心</div>
                    <div class="code">&amp;#xee2e;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee62;</i>
                    <div class="name">向右</div>
                    <div class="code">&amp;#xee62;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee5f;</i>
                    <div class="name">环</div>
                    <div class="code">&amp;#xee5f;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee3e;</i>
                    <div class="name">金额</div>
                    <div class="code">&amp;#xee3e;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee2b;</i>
                    <div class="name">图片</div>
                    <div class="code">&amp;#xee2b;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee7d;</i>
                    <div class="name">平板</div>
                    <div class="code">&amp;#xee7d;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee60;</i>
                    <div class="name">书签</div>
                    <div class="code">&amp;#xee60;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee72;</i>
                    <div class="name">钻石</div>
                    <div class="code">&amp;#xee72;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee9a;</i>
                    <div class="name">百度</div>
                    <div class="code">&amp;#xee9a;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee69;</i>
                    <div class="name">返回</div>
                    <div class="code">&amp;#xee69;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee45;</i>
                    <div class="name">订阅</div>
                    <div class="code">&amp;#xee45;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee6b;</i>
                    <div class="name">返回顶部</div>
                    <div class="code">&amp;#xee6b;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee9f;</i>
                    <div class="name">刷新</div>
                    <div class="code">&amp;#xee9f;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee48;</i>
                    <div class="name">办公桌</div>
                    <div class="code">&amp;#xee48;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee67;</i>
                    <div class="name">向下</div>
                    <div class="code">&amp;#xee67;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee68;</i>
                    <div class="name">向上</div>
                    <div class="code">&amp;#xee68;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee9b;</i>
                    <div class="name">银行卡</div>
                    <div class="code">&amp;#xee9b;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee66;</i>
                    <div class="name">点</div>
                    <div class="code">&amp;#xee66;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee6a;</i>
                    <div class="name">向右</div>
                    <div class="code">&amp;#xee6a;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee86;</i>
                    <div class="name">礼物</div>
                    <div class="code">&amp;#xee86;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee9e;</i>
                    <div class="name">icon-竖杠</div>
                    <div class="code">&amp;#xee9e;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee65;</i>
                    <div class="name">点</div>
                    <div class="code">&amp;#xee65;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee64;</i>
                    <div class="name">右箭头</div>
                    <div class="code">&amp;#xee64;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee61;</i>
                    <div class="name">小箭头</div>
                    <div class="code">&amp;#xee61;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee22;</i>
                    <div class="name">管理员</div>
                    <div class="code">&amp;#xee22;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee41;</i>
                    <div class="name">交易记录</div>
                    <div class="code">&amp;#xee41;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee9d;</i>
                    <div class="name">电话</div>
                    <div class="code">&amp;#xee9d;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee90;</i>
                    <div class="name">购物</div>
                    <div class="code">&amp;#xee90;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee8c;</i>
                    <div class="name">图表</div>
                    <div class="code">&amp;#xee8c;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee78;</i>
                    <div class="name">夜间模式</div>
                    <div class="code">&amp;#xee78;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee7e;</i>
                    <div class="name">暂停</div>
                    <div class="code">&amp;#xee7e;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee94;</i>
                    <div class="name">QQ</div>
                    <div class="code">&amp;#xee94;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee71;</i>
                    <div class="name">皇冠</div>
                    <div class="code">&amp;#xee71;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeea6;</i>
                    <div class="name">人参</div>
                    <div class="code">&amp;#xeea6;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee96;</i>
                    <div class="name">微博</div>
                    <div class="code">&amp;#xee96;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee8e;</i>
                    <div class="name">图表</div>
                    <div class="code">&amp;#xee8e;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee40;</i>
                    <div class="name">金币充值</div>
                    <div class="code">&amp;#xee40;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee93;</i>
                    <div class="name">windows</div>
                    <div class="code">&amp;#xee93;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee63;</i>
                    <div class="name">箭头</div>
                    <div class="code">&amp;#xee63;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeea5;</i>
                    <div class="name">红酒</div>
                    <div class="code">&amp;#xeea5;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee30;</i>
                    <div class="name">图文</div>
                    <div class="code">&amp;#xee30;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee7a;</i>
                    <div class="name">上下</div>
                    <div class="code">&amp;#xee7a;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee3f;</i>
                    <div class="name">137学币1</div>
                    <div class="code">&amp;#xee3f;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee46;</i>
                    <div class="name">日志</div>
                    <div class="code">&amp;#xee46;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee50;</i>
                    <div class="name">书</div>
                    <div class="code">&amp;#xee50;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee7b;</i>
                    <div class="name">手机</div>
                    <div class="code">&amp;#xee7b;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee95;</i>
                    <div class="name">微信</div>
                    <div class="code">&amp;#xee95;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee7c;</i>
                    <div class="name">电脑</div>
                    <div class="code">&amp;#xee7c;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee6e;</i>
                    <div class="name">票</div>
                    <div class="code">&amp;#xee6e;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeea2;</i>
                    <div class="name">奶茶</div>
                    <div class="code">&amp;#xeea2;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee98;</i>
                    <div class="name">阿里</div>
                    <div class="code">&amp;#xee98;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee84;</i>
                    <div class="name">单线花朵</div>
                    <div class="code">&amp;#xee84;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee85;</i>
                    <div class="name">块状花朵</div>
                    <div class="code">&amp;#xee85;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee6f;</i>
                    <div class="name">vip</div>
                    <div class="code">&amp;#xee6f;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee97;</i>
                    <div class="name">支付宝</div>
                    <div class="code">&amp;#xee97;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee6d;</i>
                    <div class="name">福蛋</div>
                    <div class="code">&amp;#xee6d;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee8b;</i>
                    <div class="name">v</div>
                    <div class="code">&amp;#xee8b;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee6c;</i>
                    <div class="name">鲜花</div>
                    <div class="code">&amp;#xee6c;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee79;</i>
                    <div class="name">晴（白天）</div>
                    <div class="code">&amp;#xee79;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee70;</i>
                    <div class="name">赏2-01</div>
                    <div class="code">&amp;#xee70;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee75;</i>
                    <div class="name">用户头像</div>
                    <div class="code">&amp;#xee75;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee77;</i>
                    <div class="name">画笔颜色</div>
                    <div class="code">&amp;#xee77;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee76;</i>
                    <div class="name">字体大小</div>
                    <div class="code">&amp;#xee76;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee74;</i>
                    <div class="name">女</div>
                    <div class="code">&amp;#xee74;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee73;</i>
                    <div class="name">男</div>
                    <div class="code">&amp;#xee73;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee83;</i>
                    <div class="name">3.1收藏-选中</div>
                    <div class="code">&amp;#xee83;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee82;</i>
                    <div class="name">3.1收藏</div>
                    <div class="code">&amp;#xee82;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee81;</i>
                    <div class="name">3.1关注1-选中</div>
                    <div class="code">&amp;#xee81;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee80;</i>
                    <div class="name">3.1关注1</div>
                    <div class="code">&amp;#xee80;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee8f;</i>
                    <div class="name">网站</div>
                    <div class="code">&amp;#xee8f;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee88;</i>
                    <div class="name">奖励所得</div>
                    <div class="code">&amp;#xee88;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeea4;</i>
                    <div class="name">厨电_披萨</div>
                    <div class="code">&amp;#xeea4;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee89;</i>
                    <div class="name">奖励</div>
                    <div class="code">&amp;#xee89;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee7f;</i>
                    <div class="name">教练休息</div>
                    <div class="code">&amp;#xee7f;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee87;</i>
                    <div class="name">红包</div>
                    <div class="code">&amp;#xee87;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee8a;</i>
                    <div class="name">完</div>
                    <div class="code">&amp;#xee8a;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee8d;</i>
                    <div class="name">图表</div>
                    <div class="code">&amp;#xee8d;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee99;</i>
                    <div class="name">淘宝</div>
                    <div class="code">&amp;#xee99;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeea3;</i>
                    <div class="name">咖啡</div>
                    <div class="code">&amp;#xeea3;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee9c;</i>
                    <div class="name">银联</div>
                    <div class="code">&amp;#xee9c;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee92;</i>
                    <div class="name">苹果</div>
                    <div class="code">&amp;#xee92;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xee91;</i>
                    <div class="name">安卓</div>
                    <div class="code">&amp;#xee91;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeea1;</i>
                    <div class="name">糖果</div>
                    <div class="code">&amp;#xeea1;</div>
                </li>
            
        </ul>
        <h2 id="unicode-">unicode引用</h2>
        <hr>

        <p>unicode是字体在网页端最原始的应用方式，特点是：</p>
        <ul>
        <li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
        <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
        <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
        </ul>
        <blockquote>
        <p>注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
        </blockquote>
        <p>unicode使用步骤如下：</p>
        <h3 id="-font-face">第一步：拷贝项目下面生成的font-face</h3>
        <pre><code class="lang-js hljs javascript">@font-face {
  font-family: <span class="hljs-string">'iconfont'</span>;
  src: url(<span class="hljs-string">'iconfont.eot'</span>);
  src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
  url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
  url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
  url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
}
</code></pre>
        <h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
        <pre><code class="lang-js hljs javascript">.iconfont{
  font-family:<span class="hljs-string">"iconfont"</span> !important;
  font-size:<span class="hljs-number">16</span>px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
        <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
        <pre><code class="lang-js hljs javascript">&lt;i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>&gt;&amp;#x33;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></span></code></pre>

        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>


</body>
</html>
